<template>
	<view class="content">
		<view :style="{height:mainHeight}">
			<view class="top-bg">
				<view class="flex a">
					<view class="iconfont icon">&#xe631;</view>
					<view class="top-title">{{pagetype}}</view>
				</view>
				<view class="add-topbox">
					<view class="code-box" v-if="orderType === 1">
						<view class="code-pic">
							<image src="../../static/erweima.jpg" class="code-pic"></image>
						</view>
						<view class="code-tit">核销二维码</view>
					</view>
					<view class="add-top flex">
						<view class="add-icon">
							<span class="iconfont center">&#xe614;</span>
						</view>
						<view class="add-info">
							<view class="add-user">
								<span class="userinfo name">{{userInfo.name}}</span>
								<span class="userinfo phone">{{userInfo.phone}}</span>
							</view>
							<view class="add-dress province">
								<span class="userinfo">{{userInfo.province}}</span>
								<span class="userinfo">{{userInfo.city}}</span>
								<span class="userinfo">{{userInfo.county}}</span>
								<span class="userinfo">{{userInfo.mark}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padBox">
			<view class="ordermain">
				<view class="ordereg" v-for="item in list" :key="item.id">
					<orderModule :orderData="item"></orderModule>
					<view class="flex btngroup">
						<u-button shape="circle" plain size="mini" class="ml20" v-if="orderType === 0">查看物流</u-button>
						<u-button shape="circle" plain size="mini" class="ml20">再来一单</u-button>
						<u-button shape="circle" plain size="mini" :custom-style="lastBtn" class="ml20" v-if="orderType === 2">评价</u-button>
						<u-button shape="circle" plain size="mini" :custom-style="lastBtn" class="ml20" v-if="orderType === 0">申请售后</u-button>
					</view>
				</view>
				<view class="total">
					<view class="flex total-cell">
						<view class="total-tit">商品金额</view>
						<view class="total-info flex">￥88</view>
					</view>
					<view class="flex total-cell">
						<view class="total-tit">优惠券</view>
						<view class="total-info flex">-￥15 </view>
					</view>
					<view class="flex total-cell">
						<view class="total-tit">配送费</view>
						<view class="total-info flex">￥8</view>
					</view>
				</view>
				<u-gap height="2" bg-color="#f0f0f0"></u-gap>
				<view class="total-num">共1件商品 小计：<span class="total-pri">￥12</span></view>
			</view>
		</view>
		<view class="padBox mb20">
			<view class="details">
				<view class="item">订单编号：20014513565164656</view>
				<view class="item">下单时间：2020-07-12 19:56:45</view>
				<view class="item" v-if="orderType === 1">有效期至：2020-07-12 19:56:45</view>
				<view class="item" v-if="orderType === 2">核销时间：2020-07-12 19:56:45</view>
				<view class="item" v-if="orderType === 0">发货时间：2020-07-12 19:56:45</view>
				<view class="item" v-if="orderType === 0">支付方式：微信支付</view>
				<view class="item" v-if="orderType === 0">支付时间：2020-07-12 19:56:45</view>
				<view class="item" v-if="orderType === 0">配送方式：快递配送</view>
				<view class="serve flex">
					<view class="serve-item flex">
						<view class="serve-icon">
							<image src="../../static/seve.png" class="serve-icon"></image>
						</view>
						<view class="serve-tit">联系客服</view>
					</view>
					<view class="serve-item flex">
						<view class="serve-icon">
							<image src="../../static/phone.png" class="serve-icon"></image>
						</view>
						<view class="serve-tit">拨打电话</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderModule from "../../components/orderitems/modualar.vue"
	export default {
		components: {
			orderModule
		},
		data() {
			return {
				orderType: 1,
				pagetype: "交易完成",
				userInfo: {
					name: "用户姓名",
					phone: "12345678910",
					province: "四川省",
					city: "成都市",
					county: "高新区",
					mark: "天府大道中段53号"
				},
				list: [{
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp", //商品图片
					goods_name: "新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉大...", //商品名称             
					goods_spec: "大码", //商品规格              
					goods_discount: 40.8, //商品折扣            
					goods_price: 58.8, //商品价格             
					checked: true, //是否选中该商品              
					number: 4, //商品购买数量
					id: '201929892'
				}, {
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp",
					goods_name: "新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉大...",
					goods_spec: "中码",
					goods_discount: 40,
					goods_price: 58.8,
					checked: true,
					number: 1,
					id: '201929893'
				}],
				lastBtn: {
					borderColor: "#F9274A",
					color: "#F71D41"
				},
				mainHeight: "266rpx"
			}
		},
		created() {
			this.setPageType();
		},
		methods: {
			setPageType() {
				if (this.orderType === 0) {
					this.pagetype = "交易完成";
				} else if (this.orderType === 1) {
					this.pagetype = "待使用";
					this.mainHeight = "526rpx";
				} else if (this.orderType === 2) {
					this.pagetype = "订单已核销";
				}
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.padBox {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.top-bg {
		height: 160rpx;
		background: linear-gradient(to right, #F75973, #F73152);
		padding: 24rpx 48rpx;
		position: relative;
	}

	.a {
		justify-content: flex-start;
	}

	.icon {
		font-size: 56rpx;
		color: #FFFFFF;
		line-height: 56rpx;
		margin-right: 22rpx;
	}

	.top-title {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.add-topbox {
		width: 710rpx;
		position: absolute;
		top: 104rpx;
		left: 20rpx;
	}

	.code-box {
		height: 260rpx;
		padding: 30rpx 0 26rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border-bottom: 1rpx dashed #F0F0F0;
	}

	.code-pic {
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto;
	}

	.code-tit {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #333333;
		text-align: center;
	}

	.add-top {
		padding: 35rpx 20rpx;
		border-radius: 12rpx;
		background: #FFFFFF;
	}

	.add-icon {
		width: 48rpx;
		height: 48rpx;
		background: #F7274A;
		border-radius: 24rpx;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.add-info {
		width: 600rpx;
	}

	.userinfo {
		display: inline-block;
		margin-right: 10rpx;
	}

	.name {
		color: #333333;
		font-size: 28rpx;
	}

	.phone {
		color: #333333;
		font-size: 28rpx;
	}

	.province {
		color: #999999;
		font-size: 26rpx;
		margin-top: 24rpx;
	}

	.ordermain {
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.ordereg {
		padding: 32rpx 10rpx;
	}

	.ord-itm {
		align-items: flex-start;
	}

	.ord-tit {
		padding: 30rpx 20rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.ord-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.ord-img image {
		width: 160rpx;
		height: 160rpx;
	}

	.ord-cen {
		width: 335rpx;
	}

	.ord-goodname {
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.ord-rig {
		width: 100rpx;
	}

	.ord-pri {
		color: #333333;
		font-size: 24rpx;
	}

	.ord-num {
		font-size: 22rpx;
		color: #999999;
		margin-top: 68rpx;
		text-align: right;
		padding-right: 10rpx;
	}

	.btngroup {
		justify-content: flex-end;
	}

	.total {
		padding: 0 24rpx 28rpx;
	}

	.total-num {
		font-size: 26rpx;
		color: #333333;
		text-align: right;
		padding: 32rpx 24rpx 36rpx;
	}

	.total-pri {
		color: #F14951;
	}

	.total-cell {
		margin-top: 48rpx;
	}

	.total-tit {
		color: #999999;
		font-size: 26rpx;
	}

	.total-info {
		color: #333333;
		font-size: 26rpx;
	}

	.details {
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 20rpx;
	}

	.item {
		font-size: 24rpx;
		color: #333333;
		padding: 20rpx 0;
	}

	.serve {
		height: 100rpx;
		padding: 30rpx 0;
	}

	.serve-item {
		width: 50%;
		justify-content: center;
		border-right: 1rpx solid #F0F0F0;
	}

	.serve-item:last-child {
		border-right: none;
	}

	.serve-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.serve-tit {
		color: #666666;
		font-size: 26rpx;
		margin-left: 20rpx;
	}
</style>
